<template>
	<header class="pageHeader">
		<div class="left-box" @click="toNav('/')">
			<img class="logo" src="@img/logo.png" loading="lazy" alt="" />
			<h2>呦步智能足部检测系统</h2>
		</div>
		<div class="right-box">
			<!-- 设备状态：已连接 -->
			<ul>
				<li v-if="is_login">
					<p>{{ baseInfo.user_name || '' }}</p>
					<button @click="clickBtns({ flag: '退出登录' })">退出登录</button>
				</li>
				<li v-else>
					<button v-if="!is_h5" @click="clickBtns({ flag: '登录' })">登录</button>
				</li>
			</ul>
		</div>
	</header>
</template>

<script>
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState(['is_login'])
	},
	name: 'pageHeader',
	data() {
		return {
			is_h5:false
		};
	},
	watch: {
		$route() {
		
			this.is_h5 = this.$route.path == '/h5'
		}
	},
	created() {},
	mounted() {},
	updated() {},
	beforeDestroy() {},
	methods: {
		clickBtns({ flag }) {
			if (flag === '登录') {
				this.$store.state.show_login = true;
				return;
			}
			if (flag === '退出登录') {
				this.toNav('/')
				this.$store.commit('logout');
				return;
			}
		},
		goPage(item) {
			if (item.path == false) {
				alertErr('维护中');
			}
			if (item.path) {
				this.$router.push(item.path);
			}
		}
	}
};
</script>

<style scoped lang="less">
.pageHeader {
	width: 100%;
	height: 100px;
	background: #ff8302;
	padding: 0 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.right-box {
		font-weight: 800;
		font-size: 20px;
		color: #ffffff;
		line-height: 28px;
		letter-spacing: 1px;
		text-align: left;
		font-style: normal;
		ul {
			display: flex;
			align-items: center;
			li {
				display: flex;
				align-items: center;
				color: #fff;
				p {
					font-size: 24px;
					font-weight: 400;
					padding-right: 15px;
				}
				button {
					color: #fff;
				}
			}
		}
	}
	.left-box {
		display: flex;
		cursor: pointer;
		.logo {
			width: 151px;
			height: 46px;
			margin-right: 10px;
		}
		h2 {
			width: 320px;
			height: 42px;

			font-weight: 800;
			font-size: 30px;
			color: #ffffff;
			line-height: 42px;
			letter-spacing: 1px;
			text-align: left;
			font-style: normal;
		}
	}
}
@media (max-width: 768px) {
	.pageHeader {
		display: none;
	}
}
</style>
